<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body,
    html {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    #box {
        position: relative;
        height: 100%;
        width: 100%;
    }
    /* .active2 {
        position: absolute;
        background-color: black;
        z-index: 99;
    } */
    
    .fromspan {
        display: inline-block;
        width: 77px;
        text-align: center;
        line-height: 30px;
        /* background-color: #ccc; */
    }
    
    input {
        width: 400px;
        height: 25px;
        padding: 2px;
    }
    
    .btn1 {
        margin: 10px;
        width: 120px;
        height: 35px;
        line-height: 35px;
    }
    
    .dialog {
        width: 500px;
        background-color: white;
        position: absolute;
        top: 0px;
        left: 600px;
        display: none;
        border: 1px solid #ccc;
    }
    
    .active {
        display: block;
    }
    
    .aaa {
        height: 40px;
        line-height: 40px;
    }
    
    .btn2 {
        float: right;
        margin: 5px;
    }
    
    .bc {
        background-color: steelblue;
        color: white;
    }
    
    form>div {
        /* border: 1px solid black; */
        width: 490px;
    }
    
    table {
        width: 600px;
        background-color: #ccc;
    }
</style>

<body>
    <script src="js/vue.js"></script>
    <div id="box" :class="{ boox: true, active2: isShow }">
        <div>
            <form>
                <div>
                    <span class="fromspan">姓名</span> <input type="text" v-model="info.name">
                </div><br>
                <div>
                    <span class="fromspan">联系电话</span> <input type="text" v-model="info.lxdh">
                </div><br>
                <div>
                    <span class="fromspan">学历</span> <input type="text" v-model="info.xl">
                </div><br>
                <div>
                    <span class="fromspan">年龄</span> <input type="text" v-model="info.age">
                </div><br>
                <div>
                    <span class="fromspan">期望薪资</span> <input type="text" v-model="info.gz">
                </div><br>
                <button type="button" @click="addHandler" class="btn1 bc">保存</button>
                <button type="button" class="btn1">重置</button>
            </form>



            <table>
                <thead>
                    <tr>
                        <!-- <td>id</td> -->
                        <td>姓名</td>
                        <td>联系电话</td>
                        <td>学历</td>
                        <td>年龄</td>
                        <td>期望工资</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in users" :key="item.id">
                        <!-- <td>{{item.id}}</td> -->
                        <td>{{item.name}}</td>
                        <td>{{item.lxdh}}</td>
                        <td>{{item.xl}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gz}}</td>
                        <td>
                            <button @click="showEdit(item.id)" class="">修改</button>
                            <button @click="delHandler(item.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>



            <div :class="{ dialog: true, active: isShow }">
                <div class="aaa">请修改信息</div>
                <div>
                    <span class="fromspan">姓名</span> <input type="text" v-model="update.name">
                </div><br>
                <div>
                    <span class="fromspan">联系电话</span> <input type="text" v-model="update.lxdh">
                </div><br>
                <div>
                    <span class="fromspan">学历</span> <input type="text" v-model="update.xl">
                </div><br>
                <div>
                    <span class="fromspan">年龄</span> <input type="text" v-model="update.age">
                </div><br>
                <div>
                    <span class="fromspan">期望薪资</span> <input type="text" v-model="update.gz">
                </div><br>
                <button type="button" @click="cancelEdit" class="btn2">关闭</button>
                <button type="button" class="btn2" @click="edit">保存修改</button>
            </div>
        </div>
    </div>

</body>
<script>
    let users = [{
        id: 1,
        name: '刘',
        lxdh: '1234567821',
        xl: '专科',
        age: '20',
        gz: '10000'
    }];
    let arr = /^[\u4E00-\u9FA5]$/;
    let zrr = /^1[3|4|5|7|8]\d{9}$/;
    new Vue({
        el: '#box',
        data: {
            users,
            info: {},
            update: {},
            isShow: false
        },
        methods: {
            delHandler(id) {
                if (!window.confirm('您确定要删除吗?')) {
                    return;
                }
                // console.log('删除点击事件');
                // console.log(`删除数组中id为${id}的数据`);
                this.users = this.users.filter(item => item.id !== id)
            },
            addHandler() {
                console.log(this.info.xl);
                if (this.info.xl == undefined || this.info.age == undefined || this.info.gz == undefined) {
                    alert('请输入内容')
                    return false;
                }
                if (!arr.test(this.info.name)) {
                    alert('姓名输入错误')
                    return false;
                }
                if (!zrr.test(this.info.lxdh)) {
                    alert('电话输入错误')
                    return false;
                }

                this.info.id = this.users[this.users.length - 1].id + 1
                console.log(this.info);
                this.users.push(this.info)
                this.info = {}
            },
            showEdit(id) {

                const result = this.users.find(item => item.id === id)
                this.update = {...result
                }
                this.isShow = true
            },
            cancelEdit() {
                this.isShow = false
            },
            edit() {
                const result = this.users.find(item => item.id === this.update.id)
                result.name = this.update.name
                result.lxdh = this.update.lxdh
                result.xl = this.update.xl
                result.age = this.update.age
                result.gz = this.update.gz
                this.isShow = false
            },


        }
    })
</script>

</html>